<template>
    <div ref="view" :width="width+'px'" :height="height+'px'">
        <!-- Holders -->
        <img v-if="holderEnabled && pos === 'bottom'" src="#" alt="view-holder" class="view-bed pos-left">
        <img v-if="holderEnabled && pos === 'bottom'" src="#" alt="view-holder" class="view-bed pos-right">
        <img v-if="holderEnabled && pos === 'bottom'" src="#" alt="view-holder" class="view-holder pos-left">
        <img v-if="holderEnabled && pos === 'bottom'" src="#" alt="view-holder" class="view-holder pos-right">
        <img v-if="holderEnabled && pos === 'top'" src="#" alt="view-holder" class="view-holder pos-left">
        <img v-if="holderEnabled && pos === 'top'" src="#" alt="view-holder" class="view-holder pos-right">
        <img v-if="holderEnabled && pos === 'middle'" src="#" alt="view-holder" class="view-holder"/>

        <!-- Background -->
        <svg class="view-bg position-absolute" xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
            <defs>
                <clipPath :id="'view-out-line-'+rdID">
                    <polygon :points="outLinePoints" fill="none"/>
                </clipPath>
            </defs>

            <!-- image bg -->
            <image :height="height" :width="width" preserveAspectRatio="none"
                   :clip-path="'url(#view-out-line-'+rdID+')'" :href="viewBg"/>

            <!-- bg lines and squares -->
            <g :clip-path="'url(#view-out-line-'+rdID+')'" style="mix-blend-mode:overlay">
                <!-- squares -->
                <g v-for="i in 17" :key="i" style="mix-blend-mode:overlay">
                    <rect v-for="j in 12" :key="j" :opacity="Math.random().toFixed(2) / 2"
                          :x="(j-1)*100" :y="(i-1)*100" height="100" width="100"
                          fill="#606060"/>
                </g>
                <g style="mix-blend-mode: overlay">
                    <rect v-for="i in 88" :key="i" opacity="0.4" height="1" width="1200" x="0" :y="i * 20" fill="white"/>
                    <rect v-for="i in 60" :key="i" opacity="0.4" height="1760" width="1" :x="i*20" :y="0" fill="white"/>
                </g>
            </g>

            <!-- out-line -->
            <polygon class="stroke-main" fill="none" stroke-miterlimit="10" :points="outLinePoints"/>

            <!-- top -->
            <g>
                <polygon class="fill-base" :points="topBasePoints"/>
                <polygon class="fill-light" :points="topLightPoints"/>
                <circle class="fill-light" r="3" :cx="width/2 - 30" cy="9"
                        v-for="count in 6" :key="count" :transform="'translate('+(count-1)*12+' 0)'"/>
                <polygon class="fill-light" points="10 0 16 0 6 10 0 10"
                         v-for="count in 3" :key="count"
                         :transform="'translate(' + (width/2 - 60 - count*10) + ' 10)'"/>
                <polygon class="fill-light" points="0 0 6 0 16 10 10 10"
                         v-for="count in 3" :key="count"
                         :transform="'translate(' + (width/2 + 43 + count*10) + ' 10)'"/>

                <polygon class="fill-main" points="0 0 15 0 25 6 10 6"
                         v-for="count in isWide ? 3 : 2" :key="count"
                         :transform="'translate(' + (width * (.5 - (1-_goldPercent) / 2) + 10 + (count-1)*20) + ' 0)'"/>

                <polygon class="fill-main" points="0 0 15 0 5 6 -10 6"
                         v-for="count in isWide ? 3 : 2" :key="count"
                         :transform="'translate(' + (width * (.5 + (1-_goldPercent) / 2) - 25 - (count-1)*20) + ' 0)'"/>
            </g>

            <!-- left -->
            <g>
                <polygon class="fill-base" :points="leftBasePoints"/>
                <polygon class="fill-light" :points="leftSquarePoints"
                         v-for="count in 4" :key="count" :transform="'translate(0 -'+ (count * 12) +')'"/>
                <polygon class="fill-light" :points="leftLightPoints"/>
                <rect class="fill-light" :height="height*.1" width="6" x="8" :y="height*.6" rx="3" ry="3"/>
                <rect class="fill-light" :height="height*.4 - 40" width="2" x="18" :y="height*.2 + 20"/>
                <rect v-for="count in isLong ? 5 : 1" :key="count" class="fill-light"
                      height="50" width="6" rx="3" ry="3" x="8" :y="height - 40 - 60 * count"/>
            </g>
            <!-- right -->
            <g>
                <polygon class="fill-base" :points="rightBasePoints"/>
                <polygon class="fill-light" :points="rightLightPoints"/>
                <rect class="fill-light" :height="height*.4-40" width="2" :x="width-20" :y="height*.1 + 20"/>
                <rect class="fill-light" :height="height*.2-80" width="6" :x="width - 12" :y="height*.5" rx="3"
                      ry="3"/>
                <polygon class="fill-light" :points="rightSquarePoints"
                         v-for="count in 3" :key="count" :transform="'translate(0 -'+(count-1)*30+')'"/>
                <rect v-for="count in isLong ? 3 : 1" :key="count" class="fill-light"
                      height="30" width="10" :x="width - 20" :y="height - 40 - 120 * count"/>
            </g>
            <!-- bottom -->
            <rect class="fill-light" height="4" :width="(width*_goldPercent) - 40"
                  :x="width*(0.5 -_goldPercent/2) + 20" :y="height-20 - 4"/>
        </svg>
    </div>
</template>

<script>
    export default {
        name: "DvViewBg",
        data() {
            return {
                width: 1000,
                height: 1000,
                isWide: false,
                isLong: false,
                rdID: "",
                pos: ""
            }
        },
        props: {
            holderEnabled: {
                type: Boolean,
                default: true
            },
            viewBg: {
                type: String,
                required: true
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                let parentEl = this.$refs.view.parentElement
                this.width = parentEl.clientWidth
                this.height = parentEl.clientHeight
                this.isWide = this.width > 900
                this.isLong = this.height > 675
                this.rdID = Number(Math.random().toString().substr(3, 6))


                let classList = parentEl.classList
                if (classList.contains("pos-top")) {
                    this.pos = "top"
                } else if (classList.contains("pos-bottom")) {
                    this.pos = "bottom"
                } else {
                    this.pos = "middle"
                }
            },
            makePoints: (points) => {
                let result = "";
                for (let i = 0; i < points.length; i++) {
                    result += points[i] + " "
                }
                return result
            }
        },
        computed: {
            _topCorner: () => 30,
            _bottomCorner: () => 40,
            _asidePercent: () => .7,
            _asideWidth: () => 20,
            _topWidth: () => 300,
            _goldPercent: () => 0.618,
            outLinePoints() {
                let width = this.width, height = this.height,
                    topCorner = this._topCorner, bottomCorner = this._bottomCorner,
                    asidePercent = this._asidePercent, asideWidth = this._asideWidth,
                    goldPercent = this._goldPercent
                let points = []
                // left top
                points.push(0, topCorner)
                points.push(topCorner, 0)

                // right top
                points.push(width - topCorner, 0)
                points.push(width, topCorner)

                // right bottom corner
                points.push(width, height * asidePercent)
                points.push(width - asideWidth, height * asidePercent + asideWidth)
                points.push(width - asideWidth, height - asideWidth)
                points.push(width - bottomCorner, height)

                // bottom
                points.push(width * (.5 + goldPercent / 2), height)
                points.push(width * (.5 + goldPercent / 2) - asideWidth, height - asideWidth)
                points.push(width * (.5 - goldPercent / 2) + asideWidth, height - asideWidth)
                points.push(width * (.5 - goldPercent / 2), height)

                // left bottom corner
                points.push(bottomCorner, height)
                points.push(asideWidth, height - asideWidth)
                points.push(asideWidth, height * asidePercent + asideWidth)
                points.push(0, height * asidePercent)

                return this.makePoints(points)
            },
            leftBasePoints() {
                let height = this.height
                let points = []
                points.push(0, height * .2)
                points.push(20, height * .2 + 20)
                points.push(20, height * .6 - 20)
                points.push(0, height * .6)
                return this.makePoints(points)
            },
            leftSquarePoints() {
                let height = this.height
                let points = []
                points.push(0, height * .2)
                points.push(20, height * .2 + 20)
                points.push(20, height * .2 + 26)
                points.push(0, height * .2 + 6)
                return this.makePoints(points)
            },
            leftLightPoints() {
                let height = this.height
                let points = []
                points.push(10, height * .2 + 20 - 10)
                points.push(20, height * .2 + 20)
                points.push(20, height * .45)
                points.push(10, height * .45 - 10)
                return this.makePoints(points)
            },
            rightBasePoints() {
                let width = this.width, height = this.height
                let points = []
                points.push(width, height * .1)
                points.push(width - 20, height * .1 + 20)
                points.push(width - 20, height * .5 - 20)
                points.push(width, height * .5)
                return this.makePoints(points)
            },
            rightLightPoints() {
                let width = this.width, height = this.height
                let points = []
                points.push(width - 10, height * .1 + 10)
                points.push(width - 20, height * .1 + 20)
                points.push(width - 20, height * .35 + 10)
                points.push(width - 10, height * .35)
                return this.makePoints(points)
            },
            rightSquarePoints() {
                let width = this.width, height = this.height
                let points = []
                points.push(width, height * .7 - 20)
                points.push(width - 20, height * .7)
                points.push(width - 20, height * .7 + 20)
                points.push(width, height * .7)
                return this.makePoints(points)
            },
            topBasePoints() {
                let width = this.width, halfAntiGoldPercent = (1 - this._goldPercent) / 2
                let points = []
                points.push(width * (.5 - halfAntiGoldPercent), 0)
                points.push(width * (.5 + halfAntiGoldPercent), 0)
                points.push(width * (.5 + halfAntiGoldPercent) - 20, 20)
                points.push(width * (.5 - halfAntiGoldPercent) + 20, 20)
                return this.makePoints(points)
            },
            topLightPoints() {
                let width = this.width, halfSmAntiGoldPercent = (1 - this._goldPercent) * (1 - this._goldPercent) / 2
                let points = []
                points.push(width * (0.5 - halfSmAntiGoldPercent), 20)
                points.push(width * (0.5 + halfSmAntiGoldPercent), 20)
                points.push(width * (0.5 + halfSmAntiGoldPercent) - 10, 30)
                points.push(width * (0.5 - halfSmAntiGoldPercent) + 10, 30)
                return this.makePoints(points)
            }
        }
    }
</script>

<style lang="scss">

</style>
